﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>淘宝幻灯片上下滑动效果</title>
		<link href = "css.css" rel = "stylesheet" type = "text/css" />
		<script src = "../jquery-1.10.1.min.js"></script>
		<script>
			$(function(){
                var aBtns = $("#play ol li");
                var oUl = $("#play ul");
                var aLis = oUl.find("li");

                var iNow = 0; //当前显示图片的下标
                var timer = null;

                aBtns.click(function(){
                    iNow = $(this).index();
                    tab();
                })

                $("#play").mouseenter(function(){
                    clearInterval(timer);
                }).mouseleave(function(){
                    timer = setInterval(function(){
                        iNow++;
                        tab();
                        
                    }, 2000);
                })

                //启动一个定时器
               timer = setInterval(function(){
                   iNow++;
                   tab();
                   
               }, 2000);


                function tab(){
                    aBtns.attr("class", '').eq(iNow).attr("class", 'active');
                    if(iNow == aBtns.size()){
                        aBtns.eq(0).attr("class", 'active')
                    }

                    oUl.animate({
                        top: -150 * iNow
                    }, 500, function(){
                        //判断是否是最后一张图片
                        if(iNow == aBtns.size()){
                            iNow = 0;
                            oUl.css("top", 0);
                        }
                    })
                    // document.title = iNow;
                }
                
            })
		</script>
	</head>
	<body>
	<div class="play" id="play">
	    <ol>
	    	<li class="active">1</li>
	        <li>2</li>
	        <li>3</li>
	        <li>4</li>
	        <li>5</li>
	    </ol>
		<ul>
			<!-- 
				可以将第一张图片，添加到最后一张图片的后面，
				当最后一张图片动画，结束的时候，直接切回第一张
			 -->
			<li><a href="http://www.baidu.com/"><img src="images/1.jpg" alt="广告一" /></a></li>
			<li><a href="http://www.baidu.com/"><img src="images/2.jpg" alt="广告二" /></a></li>
			<li><a href="http://www.baidu.com/"><img src="images/3.jpg" alt="广告三" /></a></li>
			<li><a href="http://www.baidu.com/"><img src="images/4.jpg" alt="广告四" /></a></li>
			<li><a href="http://www.baidu.com/"><img src="images/5.jpg" alt="广告五" /></a></li>
			<li><a href="http://www.baidu.com/"><img src="images/1.jpg" alt="广告一" /></a></li>
		</ul>
	</div>
	</body>
</html>








